<div class="element-browser-panel element-browser-main">
    <div class="element-browser-main-sidebar">
        <div class="element-browser-body">
            {tree -> f:format.raw()}
        </div>
    </div>
    <div class="element-browser-main-content">
        <div class="element-browser-body">
            <f:if condition="{selectedFolder}">
                <h3><f:translate key="LLL:EXT:recordlist/Resources/Private/Language/locallang_browse_links.xlf:files" /></h3>
                <span title="{selectedFolder.identifier}">
                    {selectedFolderIcon -> f:format.raw()} {selectedFolderTitle}
                </span>
                <f:if condition="{itemsInSelectedFolder}">
                    <ul class="list-tree">
                        <f:for each="{itemsInSelectedFolder}" as="file">
                            <li{f:if(condition: '{file.uid} == {currentIdentifier}', then: ' class="active"')}>
                                <span class="list-tree-group">
                                        <a href="{file.url}" class="t3js-fileLink list-tree-group" title="{file.name}">
                                            <span class="list-tree-icon">
                                                <span title="{file.name} ({file.size})">{file.icon -> f:format.raw()}</span>
                                            </span>
                                            <span class="list-tree-title">{file.title}</span>
                                        </a>
                                    </span>
                            </li>
                        </f:for>
                    </ul>
                </f:if>
            </f:if>
            {uploadFileForm -> f:format.raw()}
            {createFolderForm -> f:format.raw()}
        </div>
    </div>
</div>
